<template>
  <!-- 逻辑：在这个页面获取数据，通过props传参的方式给各个组件传参 -->
  <div class="report">
    <tableTool>
      <div slot="export">
        <el-button type="primary" @click="excelExport">导出</el-button>
      </div>

      <div class="tool-form" slot="form">
        <div class="input-group">
          <span class="lable">机构名称：</span>
          <el-input placeholder="请输入" v-model="search.orgName" />
        </div>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </tableTool>
    <customTable :list="list" :combined="combined">
      <template v-slot:title>
        <tr>
          <th colspan="8">{{orgName}}</th>
        </tr>
        <tr>
          <th>机构名称</th>
          <th>数量</th>
          <th>进出场费</th>
          <th>维保费</th>
          <th>燃油费</th>
          <th>累计租金（内租）</th>
          <th>累计租金（外租）</th>
          <th>累计租金（临租）</th>
        </tr>
      </template>
      <template #body="{ list }">
        <tr v-for="item in list" :key="item.orgId">
          <td @click="toJump(item.orgId)" class="link">
            {{ item.orgName }}
          </td>
          <td>{{ item.equipmentNumber }}</td>
          <td>{{ item.costEntryExit }}</td>
          <td>{{ item.maintenanceHarge }}</td>
          <td>{{ item.fuelCost }}</td>
          <td>{{ item.accumulatedRent }}</td>
          <td>{{ item.accumulatedRentOutside }}</td>
          <td>{{ item.accumulatedRentInThe }}</td>
        </tr>
      </template>
      <template #empty>
        <tr>
          <td colspan="8" class="empty">暂无数据</td>
        </tr>
      </template>
      <template #footer="{ combined }">
        <tr>
          <td>合计</td>
          <td>{{ combined.equipmentNumber }}</td>
          <td>{{ combined.costEntryExit }}</td>
          <td>{{ combined.maintenanceHarge }}</td>
          <td>{{ combined.fuelCost }}</td>
          <td>{{ combined.accumulatedRent }}</td>
          <td>{{ combined.accumulatedRentOutside }}</td>
          <td>{{ combined.accumulatedRentInThe }}</td>
        </tr>
      </template>
    </customTable>
    <pagination
      @onCurrentChange="handleCurrentChange"
      :total="page.total"
      :limit="page.limit"
    ></pagination>
  </div>
</template>
<script>
import tableTool from "../components/tableTool.vue";
import customTable from "../components/customTable.vue";
import pagination from "../components/pagination.vue";
import request from "@/api/comprehensiveReport/equipmentManagement";
import { combinedFn } from "@/pages/comprehensiveReport/equipmentManagement/mixin";

export default {
  name: "projectEquipmentStatisticsTable",
  components: { tableTool, customTable, pagination },
  data() {
    return {
      list: [],
      page: {
        total: 0,
        currentPage: 1,
        limit: 10,
      },
      search: {
        orgName: "",
      },
      orgName: this.$store.state.userInfo.orgInfo.orgName,
      combined: {},
      headers: {
        机构名称: "orgName",
        数量: "equipmentNumber",
        进出场费: "costEntryExit",
        维保费: "maintenanceHarge",
        燃油费: "fuelCost",
        "累计租金（内租）": "accumulatedRent",
        "累计租金（外租）": "accumulatedRentOutside",
        "累计租金（临租）": "accumulatedRentInThe",
      },
    };
  },
  created() {
    const orgType = this.$store.state.userInfo.orgInfo.orgType;
    const orgTypes = {
      2: "/projectEquipmentStatisticsTableFiliale", // 分子公司
      5: "/projectEquipmentStatisticsTableProject", // 项目部
    };
    if (Object.keys(orgTypes).includes(orgType.toString())) {
      this.$router.replace(orgTypes[orgType.toString()]);
    } else {
      this.getList();
    }
  },
  methods: {
    onSearch() {
      this.getList();
      this.onReset();
    },
    onReset() {
      this.search.orgName = "";
    },
    async getList() {
      const res = await request.getGroupEquipmentCompany({
        pageSize: this.page.limit,
        pageNo: this.page.currentPage,
        orgName: this.search.orgName, // 查询机构名称
      });
      console.log("后端返回的数据", res);
      if (res.data == null) {
        this.list = []
        this.combined = {}
        this.page.total = 0
        return;
      }
      this.page.total = res.totalCount;
      const { list, combined } = combinedFn(
        Object.values(this.headers).slice(1),
        res.data,
        [
          "equipmentNumber",
          "costEntryExit",
          "maintenanceHarge",
          "fuelCost",
          "accumulatedRent",
          "accumulatedRentOutside",
          "accumulatedRentInThe",
        ]
      );
      this.list = list;
      this.combined = combined;
    },
    toJump(orgId) {
      console.log(orgId);
      this.$router.push({
        path: "/projectEquipmentStatisticsTableFiliale",
        query: {
          orgId,
        },
      });
    },
    handleCurrentChange(currentPage) {
      console.log(`当前页: 第${currentPage}页`);
      this.page.currentPage = currentPage;
      this.getList();
    },
    excelExport() {
      const multiHeader = [[this.orgName, "", "", "", "", "", "", ""]];
      const merges = ["A1:H1"];
      import("@/utils/Export2Excel.js").then(async (excel) => {
        const { data: res } = await request.getGroupEquipmentCompany({
          pageSize: this.page.total,
          pageNo: 1,
        });
        const { list, combined } = combinedFn(
          Object.values(this.headers).slice(1),
          res,
          [
            "equipmentNumber",
            "costEntryExit",
            "maintenanceHarge",
            "fuelCost",
            "accumulatedRent",
            "accumulatedRentOutside",
            "accumulatedRentInThe",
          ]
        );
        const data = this.formatJson(this.headers, list);
        data.push(["合计", ...Object.values(combined)]);
        excel.export_json_to_excel({
          header: Object.keys(this.headers),
          data,
          filename: `设备管理-工程项目设备统计表-${this.orgName}`,
          autoWidth: true,
          bookType: "xlsx",
          multiHeader,
          merges,
        });
      });
    },
    formatJson(headers, list) {
      return list.map((item) => {
        return Object.values(headers).map((value) => {
          return item[value];
        });
      });
    },
  },
};
</script>
<style lang="scss">
</style>
